<template>
	<div class="content">
		<div class="box">
			<h2>登录</h2>
			<el-input placeholder="请输入账号" v-model="username" class="ipt"></el-input>
			<br>
			<el-input placeholder="请输入密码" v-model="password" show-password class="ipt"></el-input>
			<br>
			<el-button type="success" @click="login()" class='btn'>登录</el-button>
		</div>
	</div>
</template>

<script>
	import * as api from '../api/User'
	export default {
		name: 'login',
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			login() {
				api.login({
					userName: this.username,
					password: this.password
				}).then((res) => {
					if (res.data.code == 'success') {
						localStorage.setItem('token', res.data.token)
						this.$store.commit('token', res.data.token)
						this.$router.push('/index')
					} else {
						this.$router.push('/login')
					}
				})

			}
		}
	}
</script>

<style scoped="">
	.content {
		width: 100vw;
		height: 100vh;
		/* background-image: linear-gradient(to right, #01cfff 0% 50%, #fff 50% 100%); */
		background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573102025017&di=79496db15c05a9489026e542323f1823&imgtype=0&src=http%3A%2F%2Fwww.opseve.com%2Fpublic%2Fassets%2Fimg%2Fbackgrounds%2F1.jpg');
		background-size: 100% 100%;
	}

	h2 {
		color: #fff;
	}

	.box {
		width: 500px;
		height: 300px;
		background: #32435d;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		text-align: center;
		border-radius: 5px;
	}
	.btn {
		width: 80%;
	}
	.ipt {
		width: 80%;
		margin: 20px auto;
		background-color:#0000 !important;
	}
	.ipt input {
	    background-color: #0000 !important;
	}
</style>
